const code_msg = `
<script setup>
defineProps({
	msg: {
		type: String,
		default: "这是炫彩字体",
	},
	className: {
		type: String,
		default: "",
	},
	backgroundImage: {
		type: String,
		default:
			"linear-gradient(45deg, #845EC2, #D65DB1, #FF6F91, #FF9671, #FFC75F, #F9F871)",
	},
	click: {
		type: Function,
		default: () => {
			console.log("click")
		},
	},
	animation: {
		type: Boolean,
		default: true,
	},
	backgroundSize: {
		type: String,
		default: "300%",
	},
})
</script>
<template>
	<div
		class="colorful-font"
		:class="className"
		:style="{
			backgroundImage: backgroundImage,
			animation: animation
				? 'colorful_font 3s infinite alternate'
				: 'none',
			backgroundSize: backgroundSize,
		}"
		@click="click">
		{{ msg }}
	</div>
</template>
<style>
.colorful-font {
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5em;
	color: transparent;
	background-clip: text;
}
@keyframes colorful_font {
	20% {
		background-position: 20%;
	}
	40% {
		background-position: 40%;
	}
	60% {
		background-position: 60%;
	}
	80% {
		background-position: 80%;
	}
	100% {
		background-position: 100%;
	}
}
</style>
`
const code_msg1 = `
<script setup>
const click = () => {
	console.log("click")
}
</script>
<template>
<colorfulFont :click="click"></colorfulFont>
</template>
`

const code_msg2 = `
<script setup>
const click = () => {
	console.log("click")
}
</script>
<template>
	<colorfulFont
		msg="改变渐变颜色"
		background-image="linear-gradient(45deg,#5EC2AF,#48A9A5,#3B9097,#357785,#335F70,#2F4858)"
		:click="click">
	</colorfulFont>
	<colorfulFont
		msg="去掉动画"
		background-image="linear-gradient(45deg,#5EC2AF,#48A9A5,#3B9097,#357785,#335F70,#2F4858)" 
		animation="false"
		>
	</colorfulFont>
</template>
`

const code_msg3 = `
<template>
	<colorfulFont msg="改变动画时间" animationDuration="0.5s" />
</template>
`

export { code_msg, code_msg1, code_msg2, code_msg3 }
